// @flow

import React from 'react'
import {graphql} from 'react-apollo'
import type {Fn1} from "./types";
import {Spin} from 'antd'

type GetQueryComponent = Fn1<mixed, React.Component>
export const getQueryComponent: GetQueryComponent = gql => graphql(gql, {
    options: props => props,
})(({data, render}) => {
    if (data && data.loading) return (
        <div>
            <Spin  size="large" />
            <Spin  size="large" />
            <Spin  size="large" />
        </div>
    )
    return render(data)
})

export const QueryComponent = ({gql, options, render}) => {
    const Component = getQueryComponent(gql)
    return (<Component {...options} render={render}/>)
}
